<template>
    <div class="content">
        <div class="itemCard">
            <p class="titleP">个人资料</p>
            <ul class="contentUl clearfix">
                <li>
                    <p>姓名 <span class="requiredSpan">*</span></p>
                    <el-input v-model="name" placeholder="请输入姓名" />
                </li>
                <li>
                    <p>性别</p>
                    <el-radio-group v-model="info.a.sex">
                        <el-radio-button label="男" />
                        <el-radio-button label="女" />
                    </el-radio-group>
                </li>
                <li>
                    <p>手机号</p>
                    <PHONENUMBERINPUT :phoneNumber=info.a.phoneNumber :country=info.a.countryCode />
                </li>
                <li>
                    <p>情感状态</p>
                    <el-select v-model="info.a.affective" class="m-2" placeholder="请选择情感状态">
                        <el-option
                        v-for="item in affectiveList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                        />
                    </el-select>
                </li>
                <li>
                    <p>出生日期</p>
                    <el-date-picker
                        v-model="info.a.birth" 
                        type="date"
                        placeholder="选择日期"
                    />
                </li>
                <li>
                    <p>联系地址</p>
                    <PHONENUMBERINPUT :phoneNumber=info.a.phoneNumber :country=info.a.countryCode />
                </li>
            </ul>
        </div>
        <div class="itemCard">
            <p class="titleP">咨询原因</p>
            <ul class="contentUl clearfix">
                <li>
                    <p>是否接受过精神科相关诊断或治疗</p>
                    <el-radio-group v-model="info.a.sex">
                        <el-radio-button label="没有" />
                        <el-radio-button label="有" />
                    </el-radio-group>
                </li>
                <li>
                    <p>是否有过自伤/自杀的想法或行为</p>
                    <el-radio-group v-model="info.a.sex">
                        <el-radio-button label="没有" />
                        <el-radio-button label="有" />
                    </el-radio-group>
                </li>
                <li>
                    <p>是否有心理咨询经历</p>
                    <el-radio-group v-model="info.a.sex">
                        <el-radio-button label="没有" />
                        <el-radio-button label="10次以下" />
                        <el-radio-button label="10-30次" />
                        <el-radio-button label="31-50次" />
                        <el-radio-button label="51次以上" />
                    </el-radio-group>
                </li>
                <li>
                    <p>主要困扰（可多选）</p>
                    <el-checkbox-group v-model="info.b.worry">
                        <el-checkbox v-for="item in worryList" :key="item.value" :label="item.name" border >
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </li>
                <li>
                    <p>简述咨询原因</p>
                    <el-input
                        v-model="info.b.reason"
                        :rows="4"
                        type="textarea"
                        placeholder=""
                        maxlength="300"
                        show-word-limit
                    />
                </li>
                <li>
                    <p>备注</p>
                    <el-input
                        v-model="info.b.remarks"
                        :rows="4"
                        type="textarea"
                        placeholder=""
                        maxlength="500"
                        show-word-limit
                    />
                </li>
            </ul>
        </div>
        <div class="itemCard">
            <p class="titleP">监护人</p>
            <ul class="contentUl clearfix">
                <li>
                    <p>监护人姓名 <span class="requiredSpan">*</span></p>
                    <el-input v-model="info.c.name" placeholder="请输入姓名" />
                </li>
                <li>
                    <p>联系电话 <span class="requiredSpan">*</span></p>
                    <PHONENUMBERINPUT :phoneNumber=info.c.phone :country=info.a.countryCode />
                </li>
                <li>
                    <p>关系 <span class="requiredSpan">*</span></p>
                    <el-radio-group v-model="info.a.sex">
                        <el-radio-button label="父母" />
                        <el-radio-button label="亲友" />
                        <el-radio-button label="师生" />
                        <el-radio-button label="其他" />
                    </el-radio-group>
                </li>
            </ul>
        </div>
        <div class="footerBtn">
            <el-button>取消</el-button>
            <el-button  type="primary">提交</el-button>
        </div>
    </div>
    
</template>

<script lang="ts" setup>
import { ref , reactive} from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
import { Module } from 'vuex';
import PHONENUMBERINPUT from '../../components/phoneNumberChoose/index.vue'



const name = ref('')

let info = ref({
    a: {
        name: '',
        sex: 1,
        phoneNumber: '139088888888',
        countryCode: '+86',
        affective: 1,
        birth: '',
        city: '',
        address: ''

    },
    b: {
        isDiagnosis: 0,
        isSuicide: 0,
        isConsult: 0,
        worry: [],
        worryList: [],
        reason: '',
        remarks: '',
    },
    c: {
        name: '',
        phone: '',
        relationship: 0
    }

})
const affectiveList = [
    {value:1,name:'单身'},
    {value:2,name:'恋爱中'},
    {value:3,name:'已婚'},
    {value:4,name:'离异'},
    {value:5,name:'丧偶'},
    {value:6,name:'其他'}
];
const worryList = [
    {value: 1, name: '情绪管理'},
    {value: 2, name: '亲密关系'},
    {value: 3, name: '婚姻家庭'},
    {value: 4, name: '亲子教育'},
    {value: 5, name: '个人成长'},
    {value: 6, name: '身心健康'},
    {value: 7, name: '职场问题'},
    {value: 8, name: '人际关系'},
    {value: 9, name: '其他'},
    {value: 10, name: '性心理'},
    {value: 11, name: '儿童青少年'},
    {value: 12, name: '心理创伤'},

]

</script>


<style scoped lang="scss">
.content{
    padding: 10px 10px 20px;
    box-sizing: border-box;
    background: #eeeeee;
    overflow-y: scroll;
    .itemCard{
        padding: 0 10px 40px;
        margin-bottom: 20px;
        background: #ffffff;
        .titleP{
            font-size: 18px;
            font-weight: bolder;
            text-indent: 20px;
            line-height: 60px;
            border-bottom: 1px solid #eeeeee;
            width: 100%;

        }
        .el-checkbox{
            margin-bottom: 10px;
        }
        .el-input{
            width: 100%!important;
        }
        .contentUl{
            li{
                width: 30%;
                float: left;
                margin-right: 3%;
                p{
                    line-height: 40px;
                    text-indent: 10px;
                }
                
            }
        }
    }
   
    .footerBtn{
        text-align: center;
        padding-bottom: 10px;
    }
}
    
</style>
